<template>
    <div id="part">
        <!-- 整体模板div -->
        <div class="zone_module">
            <!-- 下一级模板div -->
            <div class="new_zone_module">
                <!-- 分区标题 -->
                <div class="zone_title">
                    <!-- 标题头部的各个部位 -->
                    <div class="headline">
                        <!-- 放入分区logo -->
                        <i class="zone_icon"></i>
                        <!-- 分区名称 -->
                        <a href="#" class="name"><h2>{{partitionName}}</h2></a>
                        <!-- 刷新分区内容 -->
                        <div class="repush">
                            <!-- 刷新图标 -->
                            <i class="icon_repush"></i>
                            <!-- 刷新显示出多少新内容 -->
                            <span class="info">
                                <!-- 条数 -->
                                <b></b>
                                条新推荐
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 分区内容框 -->
                <div class="zone_box">
                    <div class="zone_box_line1">
                    <!-- 第一个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView1()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview" name="Java" class="content_box_a1">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc1" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle1}}</p>
                        </router-link>
                    </div>
                    <!-- 第二个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView2()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc2" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle2}}</p>
                        </router-link>
                    </div>
                    <!-- 第三个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView3()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview" class="content_box_a3">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc3" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle3}}</p>
                        </router-link>
                    </div>
                    <!-- 第四个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView4()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc4" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle4}}</p>
                        </router-link>
                    </div>
                    <!-- 第五个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView5()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc5" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle5}}</p>
                        </router-link>
                    </div>
                    </div>
                    <div class="zone_box_line2">
                    <!-- 第六个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView6()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc6" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle6}}</p>
                        </router-link>
                    </div>
                    <!-- 第七个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView7()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc7" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle7}}</p>
                        </router-link>
                    </div>
                    <!-- 第八个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView8()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc8" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle8}}</p>
                        </router-link>
                    </div>
                    <!-- 第九个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView9()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc9" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle9}}</p>
                        </router-link>
                    </div>
                    <!-- 第十个内容框 -->
                    <div class="content_box" @click="giveUrlToVideoView10()">
                        <!-- 点击跳转至详细标签 -->
                        <router-link to="videoview">
                            <!-- 内容封面图 -->
                            <div class="content_pic">
                                <img :src="imgSrc10" style="width:120px;height:100px">
                            </div>
                            <!-- 内容标题 -->
                            <p title="" class="content_title">{{resourceTitle10}}</p>
                        </router-link>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <!-- <div class="playVideo">
            <video controls width="50%" height="50%" autoplay :src="videoSrc"></video>
        </div> -->

    </div>
</template>

<script>
import imgCourceJava from '@/../static/images/cource_java.jpg';
import imgCourceC from '@/../static/images/cource_c.jpg';
import imgCourcePython from '@/../static/images/cource_python.jpg';
import imgCourceSpring from '@/../static/images/cource_spring.jpg';
import imgCourceAndroid from '@/../static/images/cource_android2.jpg';
import imgCourceRepush from '@/../static/images/repush.png';

import {setCookie,getCookie} from '../assets/js/cookie.js'

export default {
    data(){
        return{
            resourceCategory:'',
            resourceTitle1:'',
            resourceTitle2:'',
            resourceTitle3:'',
            resourceTitle4:'',
            resourceTitle5:'',
            resourceTitle6:'',
            resourceTitle7:'',
            resourceTitle8:'',
            resourceTitle9:'',
            resourceTitle10:'',
            whatEverItIs:'',
            imgSrc1:'',
            imgSrc2:'',
            imgSrc3:'',
            imgSrc4:'',
            imgSrc5:'',
            imgSrc6:'',
            imgSrc7:'',
            imgSrc8:'',
            imgSrc9:'',
            imgSrc10:'',
            videoSrc:'',
            videoUrl1:'',videoUrl2:'',videoUrl3:'',videoUrl4:'',videoUrl5:'',videoUrl6:'',videoUrl7:'',videoUrl8:'',videoUrl9:'',videoUrl10:'',
        }
    },
    mounted(){
        this.getPartitionData()
    },
    methods:{
            
        getPartitionData(){
            let resource_Category = {"resourceCategory":this.partitionName}
            console.log(resource_Category)
            this.$http.post('http://localhost:8080/resource/main',resource_Category).then((res)=>{
                console.log(res)
                console.log(res.body)
                // for(var n=0;n<5;n++){
                // console.log(res.body[n])
                // }
            // var reader = new FileReader();
            // reader.readAsDataURL(res.body[0].resourceCover)
            // reader.onload=function(e){
            //     var result=document.getElementById("test")
            //     result.innerHTML='<img src="' + this.result +'" alt="" />'
            // }
            this.resourceTitle1=res.body[0].resourceTitle
            this.imgSrc1=res.body[0].resourceCover
            this.videoUrl1=res.body[0].resourceUrl
            this.resourceTitle2=res.body[1].resourceTitle
            this.imgSrc2=res.body[1].resourceCover
            this.videoUrl2=res.body[1].resourceUrl
            this.resourceTitle3=res.body[2].resourceTitle
            this.imgSrc3=res.body[2].resourceCover
            this.videoUrl3=res.body[2].resourceUrl
            this.resourceTitle4=res.body[3].resourceTitle
            this.imgSrc4=res.body[3].resourceCover
            this.videoUrl4=res.body[3].resourceUrl
            this.resourceTitle5=res.body[4].resourceTitle
            this.imgSrc5=res.body[4].resourceCover
            this.videoUrl5=res.body[4].resourceUrl
            this.resourceTitle6=res.body[5].resourceTitle
            this.imgSrc6=res.body[5].resourceCover
            this.videoUrl6=res.body[5].resourceUrl
            this.resourceTitle7=res.body[6].resourceTitle
            this.imgSrc7=res.body[6].resourceCover
            this.videoUrl7=res.body[6].resourceUrl
            this.resourceTitle8=res.body[7].resourceTitle
            this.imgSrc8=res.body[7].resourceCover
            this.videoUrl8=res.body[7].resourceUrl
            this.resourceTitle9=res.body[8].resourceTitle
            this.imgSrc9=res.body[8].resourceCover
            this.videoUrl9=res.body[8].resourceUrl
            this.resourceTitle10=res.body[9].resourceTitle
            this.imgSrc10=res.body[9].resourceCover
            this.videoUrl10=res.body[9].resourceUrl
             /**/
          })
        },
        giveUrlToVideoView1(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl1
            setCookie('videoCode',this.videoUrl1,1000*10)
        },
        giveUrlToVideoView2(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl2
            setCookie('videoCode',this.videoUrl2,1000*10)
        },
        giveUrlToVideoView3(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl3
            setCookie('videoCode',this.videoUrl3,1000*10)
        },
        giveUrlToVideoView4(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl4
            setCookie('videoCode',this.videoUrl4,1000*10)
        },
        giveUrlToVideoView5(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl5
            setCookie('videoCode',this.videoUrl5,1000*10)
        },
        giveUrlToVideoView6(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl6
            setCookie('videoCode',this.videoUrl6,1000*10)
        },
        giveUrlToVideoView7(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl7
            setCookie('videoCode',this.videoUrl7,1000*10)
        },
        giveUrlToVideoView8(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl8
            setCookie('videoCode',this.videoUrl8,1000*10)
        },
        giveUrlToVideoView9(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl9
            setCookie('videoCode',this.videoUrl9,1000*10)
        },
        giveUrlToVideoView10(){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl10
            setCookie('videoCode',this.videoUrl10,1000*10)
        },
    },
    props:['partitionName']
}
</script>

<style scoped>
#part{
    margin: 0;
    padding: 0;
    width: 70%;
    height: 350px;
}
.zone_module{
    margin: 0 auto;
    width: 700px;
    height: 350px;
    background-color:#fff;
}
/* .zone_title{
    display: inline-block;
} */
.headline{
    margin: 50px 10px 10px 10px;
    display: flex;
}
/* .zone_icon{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/cource_java.jpg');
    background-position: center center;
    background-size: 80px 80px;
} */
.icon_repush{
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url('~@/../static/images/repush.png');
    background-position: center center;
    background-size: 60px 60px;
}
.zone_box{
    width: 1200px;
    height: 300px;
}
.content_box{
    width: 120px;
    height: 140px;
    margin: 0px 15px 0px 15px;
}
.content_box_a1{
    background-image: url()
}
.content_box_a3{
    background-image: url()
}
.content_box a{
    text-decoration: none;
}
.content_box a :hover{
    color:dodgerblue;
}
.content_title{
    font-size: 12px;
    font-weight: 500;
    color: black;
}

.zone_box_line1{
    display: flex;
    margin: 0px 0px 15px 10px;
}
.zone_box_line2{
    display: flex;
    margin: 10px;
}
</style>
